<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui" template="/main.xhtml">
	
	
	<ui:define name="menu">
		<h:form>
			<li>
				<h:commandLink action="administrativo" value="Cadastrar Quarto" styleClass="nav"/>
			</li>
			<li>
				<h:commandLink action="administrativo" value="Consolidar Reserva/Check-in" styleClass="nav"/>
			</li>
			<li>
				<h:commandLink action="#{administradorAction.iniciaUnidadeAction}" value="Quartos" styleClass="nav"/>
			</li>
			<li>
				<h:commandLink value="Check-out" action="#{administradorAction.iniciaEstadiaAction}" styleClass="nav"/>
			</li>
			<li>
				<h:commandLink action="#{administradorAction.logout()}"
						styleClass="nav" value="Sair"
						rendered="#{administradorAction.admLogado}" />
			</li>
		</h:form>
	</ui:define>
	
	
	<ui:define name="conteudo">
		
		<h1>Quartos</h1>
		
		<hr></hr>
		
		<div id="listaQuartos">
						
			<p:dataTable id="tabelaQuartos" value="#{unidadeAction.listaQuartos}" var="quarto"
						paginatorPosition="bottom" paginator="true" rows="30" >
				
				<p:column>
					<f:facet name="header">
						<h:outputText value="Numero" />
					</f:facet>
					<h:outputText value="#{quarto.numero}" id="numero"/>
				</p:column>
				
				<p:column>
					<f:facet name="header">
						<h:outputText value="Tipo do Quarto" />
					</f:facet>
					<h:outputText value="#{quarto.tipoQuarto.nome}" id="tipoQuarto"/>
				</p:column>
				
				<p:column>
					<f:facet name="header">
						<h:outputText value="Status" />
					</f:facet>
					<h:outputText value="#{quarto.statusQuarto.nome}" id="status"/>
				</p:column>
								
				<p:column style="display:none">
					<f:facet name="header">
						<h:outputText value="Preço" />
					</f:facet>
					<h:outputText value="R$ #{quarto.preco}" id="preco"/>
				</p:column>
				
				<p:column style="display:none" rendered="#{!quarto.consumiveis.isEmpty()}">
					<f:facet name="header">
						<h:outputText value="Consumíveis" />
					</f:facet>
					<h:outputText value="#{quarto.consumiveisToString()}" id="consumivel"/>
				</p:column>
				
				
				<p:column style="display:none" rendered="#{quarto.statusQuarto.nome != 'Livre'}">
					<f:facet name="header">
						<h:outputText value="Check-in" />
					</f:facet>
					<h:outputText value="#{quarto.horarioEntrada}" id="dataEntrada"/>
				</p:column>
				
				<p:column style="display:none" rendered="#{quarto.statusQuarto.nome != 'Livre'}">
					<f:facet name="header">
						<h:outputText value="Check-out" />
					</f:facet>
					<h:outputText value="#{quarto.horarioSaida}" id="dataSaida"/>
				</p:column>
				
				<p:column style="display:none" rendered="#{quarto.statusQuarto.nome != 'Livre'}">
					<f:facet name="header">
						<h:outputText value="Cliente" />
					</f:facet>
					<h:outputText value="#{quarto.hospede.nome}" id="nome"/>
				</p:column>

			</p:dataTable>    	
		</div>
    	
    	<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/faces/public/stylesheets/modalDialog/basic.css" />
    	
    	<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/modalDialog/jquery.simplemodal.js" ></script>
    	<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/faces/public/javascripts/unidade/jbossGayDaCu.js" charset="UTF-8"></script>
		
		<style type="text/css">
			header nav{
				width: 80%;
			}
		
			div#listaQuartos{
				float: left;
				width: 100%;
				
				padding-top: 1%;
			}
		
			table tbody tr{
				cursor: pointer;
			}
			
			table tbody tr:hover{
				background: #85B2CB !important;
			}
			
			.simplemodal-data li{
				padding-bottom: 1%;
			}
						
			li.th{
				width: 50%;
				float: left;
			}
			
			li.td{
				width: 50%;
				float: left;
				
				font-weight: bold;
			}
			
			div.simplemodal-data h3{
				text-shadow: none;
			}
		</style>
    	
    </ui:define>

</ui:composition>